<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :message-unread-count="unreadCount" :user-avatar="userAvatar"/>
          <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
          <error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
          <message-tip v-model="unreadCount" style="margin-right: 10px;"/>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :pageTagsList="pageTagsList" @on-close="handleCloseTag"/>
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from '@/components/main/components/side-menu'
import HeaderBar from '@/components/main/components/header-bar'
import TagsNav from '@/components/main/components/tags-nav'
import User from '@/components/main/components/user'
import ABackTop from '@/components/main/components/a-back-top'
import Fullscreen from '@/components/main/components/fullscreen'
import Language from '@/components/main/components/language'
import MessageTip from '@/components/main/components/message-tip'
import ErrorStore from '@/components/main/components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import util from '@/libs/utils.js'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import '@/components/main/main.less'
import { ws } from '@/api/index'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    MessageTip,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false
    }
  },
  computed: {
    ...mapGetters([
      'errorCount'
    ]),
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    pageTagsList () {
      return this.$store.state.app.pageOpenedList // 打开的页面的页面对象
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    },
    cacheList () {
      const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
      return list
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  stompClient: {
    monitorIntervalTime: 100,
    stompReconnect: true,
    timeout (orgCmd) {}
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    ...mapActions([
      'handleLogin',
      'getUnreadMessageCount',
      'getUserInfo'
    ]),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    init () {
      // 菜单
      let pathArr = util.setCurrentPath(this, this.$route.name)
      // this.$store.commit('updateMenulist');
      if (pathArr.length >= 2) {
        this.$store.commit('addOpenSubmenu', pathArr[1].name)
      }
      // let userInfo = JSON.parse(Cookies.get('userInfo'))
      this.getUserInfo().then(res => {
        let userInfo = res.data
        this.username = userInfo.username
        this.userId = userInfo.id
      })
      this.checkTag(this.$route.name)

      // 消息开关 websocket
      let messageOpen = this.getStore('messageOpen')
      if (messageOpen !== '0') {
        this.connectSrv()
      }
    },
    onConnected (frame) {
      console.log('连接ws成功: ' + frame)
      // 订阅广播系统通知
      this.$stompClient.subscribe(
        '/topic/subscribe',
        this.responseCallback,
        this.onFailed
      )
      // 订阅点对点 通过用户id指定用户
      this.$stompClient.subscribe(
        '/user/' + this.userId + '/subscribe',
        this.responseCallback,
        this.onFailed
      )
    },
    responseCallback (frame) {
      // console.log('收到消息：' + frame.body)
      this.$store.commit('setMessageCount', this.unreadCount + 1)
    },
    onFailed (frame) {
      console.log('连接ws失败： ' + JSON.stringify(frame))
    },
    connectSrv () {
      console.log('begin to connect')
      var headers = {}
      this.connetWM(ws, headers, this.onConnected, this.onFailed)
    },
    checkTag (name) {
      let openpageHasTag = this.pageTagsList.some(item => {
        if (item.name === name) {
          return true
        }
      })
      if (!openpageHasTag) {
        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
        util.openNewPage(
          this,
          name,
          this.$route.params || {},
          this.$route.query || {}
        )
      }
    }
  },
  watch: {
    $route (to) {
      this.$store.commit('setCurrentPageName', to.name)
      let pathArr = util.setCurrentPath(this, to.name)
      if (pathArr.length > 2) {
        this.$store.commit('addOpenSubmenu', pathArr[1].name)
      }
      this.checkTag(to.name)
      localStorage.currentPageName = to.name
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.init()
    // 获取未读消息条数
    this.getUnreadMessageCount()
  },
  created () {
    // 显示打开的页面的列表
    this.$store.commit('setOpenedList')
  }
}
</script>
